<template lang="">
    <div>
        <headers></headers>
        <div class="lost">
            <div class="left">
                <div class="top">
                    <el-tag style="font-weight: bolder;" v-if="lostItem.cardType=='寻找失主'" type="success" effect="dark">{{lostItem.cardType}}</el-tag>
                    <el-tag style="font-weight: bolder;" v-if="lostItem.cardType=='丢失物品'" type="danger" effect="dark">{{lostItem.cardType}}</el-tag>
                    <div class="r">
                        <i class="el-icon-time"></i> 发布时间:{{lostItem.issueTime}}
                    </div>
                </div>

                <!-- 标题 -->
                <div class="title">
                    <p>#{{lostItem.tag}}# <span style="font-size:18px;font-weight:400;">{{lostItem.itemsName}}</span></p>
                </div>

                 <!-- 物品描述 -->
                 <div class="desc">
                     <p>{{lostItem.itemsDesc}}</p>
                </div>
                
                <!-- 物品图片 -->
                <div v-if="lostItem.plist.length>0" class="img">
                    <el-carousel>
                        <el-carousel-item  v-for="item in lostItem.plist" :key="item">
                            <h3 class="small">
                                <img :src="item" alt="">
                            </h3>
                        </el-carousel-item>
                    </el-carousel>
                </div>
                <div class="comment">
                <div class="header">
                    <span>评论({{param.total}})</span>
                    <div class="r">
                        <el-input v-model="form.content" placeholder="请输入内容"></el-input>
                        <el-button size="mini" @click="issueComment">留言</el-button>
                    </div>
                </div>
                <hr>

                <div class="list" v-for="(item, index) in commentList" :key="index">
                    <div class="user">
                        <div class="le">
                            <img :src="item.speaker.picture" alt="">
                            <strong class="name">{{item.speaker.username}}</strong>
                        </div>
                        <span>{{item.time}}</span>
                    </div>
                    <div class="content">{{item.content}}</div>
                    <div class="foot">
                        <div class="sender">
                            <span @click="addLikeCnt(item)"><img v-if="item.like==false" src="@/assets/images/svg/like.svg" alt=""><img v-if="item.like==true" src="@/assets/images/svg/liked.svg" alt=""></img> {{item.likeCnt}}</span>
                        </div>
                        <!-- <div class="btn">
                            <el-button @click="reply(item)">回复</el-button>
                        </div> -->
                    </div>

                    <div v-if="isShow" class="reply">
                        <el-input v-model="replyForm.content" placeholder="请输入内容"></el-input>
                        <el-button @click="replyComment">确定</el-button>
                    </div>
                </div>
                <el-pagination  background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page.sync="param.current" :page-sizes="[100, 200, 300, 400]" :page-size="param.size"
                    layout="prev, pager, next" :total="param.total">
                </el-pagination>
            </div>
            </div>
            <div class="right">
                <div class="info">
                    <div class="info_title" style="height: 60px;">
                        <div class="l">
                            <img style="width: 60px;height: 60px;border-radius: 30px;" :src="lostItem.issuer.picture" alt="">
                        </div>
                        <div>
                             <div class="r" style="line-height: 30px;margin-left: -30px;">{{lostItem.issuer.username}}</div>
                             <div class="chat" style="line-height: 30px;margin-left: -30px;"><i style="color:green;font-size: 20px;" class="el-icon-chat-line-round"></i> 聊一聊</div>
                        </div>
                       
                    </div>
                </div>

                <div class="ex">精品推荐</div>
                <div class="recommend">
                    <div class="item" v-for="(item, index) in 4" :key="index">
                        <img src="@/assets/images/posts/2.jpg" alt="">
                        <div class="infos">
                            <div class="name">Magazine Showcase Mockup</div>
                            <div class="opr">
                                <div class="l">
                                    <span class="newP">￥20.00</span>
                                    <div class="s">
                                        <div class="oldP" style="text-decoration: line-through">￥30.00</div>
                                    </div>
                                </div>
                                <div class="r">
                                    <el-button size="mini">查看</el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <footers></footers>
    </div>
</template>
<script>
import { getDetails } from "../../utils/lost.js";
import { comment,getComment,addLike } from "../../utils/comment.js";
    export default {
        data() {
            return {
                lostItem: {
                    plist:[],
                    issuer:{}
                },
                params: {
                    userId: "",
                    token: "",
                },
                param:{
                    id: '',
                    type: "失物招领",
                    current:1,
                    size:5,
                    total:0
                },
                form:{
                    cardId: '',
                    content: "",
                    issueId: '',
                    fatherId: 0,
                    type: "失物招领"
                },
                replyForm: {
                    cardId: '',
                    content: "",
                    issueId: '',
                    fatherId: '',
                    type: "失物招领"
                },
                isShow: false,
                commentList: []
            }
        },
        created() {
            this.param.id = this.$route.query.id;
            this.form.cardId = this.$route.query.id;
            this.replyForm.cardId = this.$route.query.id;
            this.params.userId = localStorage.getItem("user");
            this.form.issueId = localStorage.getItem("user");
            this.replyForm.issueId = localStorage.getItem("user");
            this.params.token = this.$cookies.get("token");
            this.getLost();
            this.getCommentList();
        },
        methods:{
            handleSizeChange(val) {
                this.param.size=val;
                this.getCommentList();
            },
            handleCurrentChange(val) {
                this.param.current=val;
                this.getCommentList();
            },
            getLost(){
                getDetails(this.param,this.params).then(res=>{
                    if(res.data.code==200){
                        this.lostItem = res.data.data;
                    }else{
                        this.$message.error(res.data.msg);
                    }
                })
            },
             //评论
             issueComment(){
                if(this.form.content.length > 0){
                    comment(this.form,this.params).then(res=>{
                        if(res.data.code==200){
                            this.$message.success(res.data.msg);
                            this.form.content='';
                            this.getCommentList();
                        }else{
                            this.$message.error(res.data.msg);
                        }
                    })
                }else{
                    this.$message.error("输入为空");
                }
            },
            //回复
            // reply(item) {
            //     this.isShow = true; 
            //     this.replyForm.fatherId= item.id;
            // },
            //回复评论
            // replyComment(){
            //     comment(this.replyForm,this.params).then(res=>{
            //         if(res.data.code==200){
            //             this.$message.success(res.data.msg);
            //             this.replyForm.content='';
            //             this.isShow = false;
            //             this.getCommentList();
            //         }else{
            //             this.$message.error(res.data.msg);
            //         }
            //     })
            // },


            //查询评论
            getCommentList(){
                getComment(this.param,this.params).then(res=>{
                    
                    if(res.data.code==200){
                         this.commentList = res.data.data.records;
                         this.param.current = res.data.data.current;
                         this.param.size = res.data.data.size;
                         this.param.total = res.data.data.total;
                    }else{
                        this.$message.error(res.data.msg);
                    }
                })
            },

            //点赞
            addLikeCnt(item){
                item.like = !item.like;
                addLike(item,this.params).then(res=>{
                    if(res.data.code==200){
                       item.likeCnt += res.data.data;
                    }else{
                        this.$message.error(res.data.msg);
                    }
                })
            }
            
        }
    }
</script>
<style lang="less" scoped>
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
    @import url('./index.less');
</style>